<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
        }

        .JD {
            width: 390px;
            font-size: 14px;
        }

        .JD-ADS {
            width: 390px;
            height: 44px;
            display: flex;
            justify-content: space-between;
            background-color: rgb(51, 52, 51);
        }

        .JD-ADS .ADS1 {
            width: 72px;
            height: 44px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .JD-ADS .ADS1 img:nth-child(1) {
            width: 12px;
        }

        .JD-ADS .ADS1 img:nth-child(2) {
            width: 30px;
        }

        .JD-ADS .ADS2 {
            width: 210px;
            height: 44px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .JD-ADS .ADS3 {
            width: 90px;
            height: 44px;
            background-color: rgb(244, 53, 21);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .Top {
            width: 390px;
            height: 42px;
            background-color: rgb(195, 10, 11);
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: sticky;
            top: 0px;
        }

        .Top .Top-Menu {
            width: 46px;
            height: 42px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .Top .Top-Menu img {
            width: 20px;
        }

        .Top .Top-Search {
            width: 330px;
            height: 30px;
            border-radius: 10px;
            background-color: white;
            display: flex;
            align-items: center;
        }

        .Top-Search-Box {
            padding-left: 10px;
            margin-left: 20px;
            border-left: 1px solid rgb(183, 183, 183);
            width: 111px;
            height: 18px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .Top .Top-Search-Icon {
            width: 20px;
            margin-left: 6px;
        }

        .Top .Top-Search-input {
            border: none;
            outline: none;
            font-size: 13px;
            color: gray;
        }

        .Top .Top-Search-input-Img {
            width: 18px;
            height: 18px;
            background-size: 245px;
            background-image: url(https://img.yumesakura.com/image/2024/11/07/gpont0.png);
            background-position: 44.892% 0px;
            background-repeat: no-repeat;
        }

        .Top .Top-Login {
            width: 33px;
            height: 30px;
            margin-left: 10px;
            margin-right: 10px;
            color: white;
            display: flex;
            align-items: center;
        }

        .Banner {
            background-color: rgb(195, 10, 11);
            background-image: url(https://img.yumesakura.com/image/2024/11/07/gpxmzk.png);
            background-repeat: no-repeat;
            background-size: 390px 153px;
            width: 390px;
            height: 153px;
        }

        .Banner2 {
            background-color: rgb(195, 10, 11);
            width: 390px;
            height: 130px;
            display: flex;
            justify-content: space-around;
        }

        .Banner2 .HandPhone {
            background-image: url(https://img.yumesakura.com/image/2024/11/07/gpxz9g.png);
            background-repeat: no-repeat;
            background-size: 115px 130px;
            width: 115px;
            height: 140px;
        }

        .Banner2 .Watch {
            background-image: url(https://img.yumesakura.com/image/2024/11/07/gpxv3v.png);
            background-repeat: no-repeat;
            background-size: 170px 130px;
            width: 170px;
            height: 130px;
        }

        .Banner2 .Rangehood {
            background-image: url(https://img.yumesakura.com/image/2024/11/07/gpxsq5.png);
            background-repeat: no-repeat;
            background-size: 115px 130px;
            width: 115px;
            height: 140px;
        }

        .Menu {
            width: 390px;
            height: 145px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .Menu-A {
            width: 335px;
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }

        .Menu-B {
            width: 335px;
            display: flex;
            justify-content: space-around;
        }

        div[class^="menu-"] {
            width: 100px;
            height: 100px;
        }

        div[class^="Menu-"] .Menu-icon img {
            width: 40px;
            height: 40px;
        }

        div[class^="Menu-"] .Menu-text {
            font-size: 12px;
            color: rgb(199, 199, 199);
        }

        .Sec-kiling {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .Sec-kiling-titile {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .Sec-kiling-titile .Sec-kiling-titile-left {
            display: flex;
            justify-content: left;
        }

        .Sec-kiling-titile .Sec-kiling-titile-left div:first-child {
            margin-left: 10px;
        }


        .Sec-kiling-titile .Sec-kiling-titile-left div:nth-child(2) {
            margin-left: 20px;
            margin-right: 5px;
        }

        .Sec-kiling-titile .Sec-kiling-titile-left div:nth-child(4) {
            margin-left: 10px;
        }

        .Sec-kiling-titile .Sec-kiling-titile-right img {
            margin-right: 10px;
        }

        .Sec-kiling-titile .Sec-kiling-titile-right {
            display: flex;
            justify-content: right;
        }

        .Sec-kiling-titile .Sec-kiling-titile-left div,
        .Sec-kiling-titile .Sec-kiling-titile-right div {
            font-weight: bold;
        }

        .Sec-kiling-titile .Sec-kiling-titile-left img:nth-child(3) {
            width: 20px;
            height: 18px;
        }

        .Sec-kiling-titile .Sec-kiling-titile-right img:nth-child(1) {
            width: 12px;
            height: 12px;
        }

        .Sec-kiling-goods {
            display: flex;
            justify-content: space-around;
        }

        div[class^="goods-"] div:last-child {
            font-size: 12px;
            color: rgb(199, 7, 7);
            text-align: center;
        }

        div[class^="goods-"] div:first-child img {
            width: 50px;
        }

        .Goods {
            display: flex;
            justify-content: space-around;
            padding-top: 10px;
            background-color: rgb(246, 246, 246);
        }

        .Goods img {
            width: 184px;
        }

        .Bar {
            width: 390px;
            height: 80px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: white;
            font-weight: bold;
            color: rgb(112, 111, 112);
            box-shadow: 0px -5px 23px rgba(0, 0, 0, 0.4);
            position: fixed;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="JD">
        <div class="JD-ADS">
            <div class="ADS1">
                <img src="https://img.yumesakura.com/image/2024/11/07/gpomhd.png" alt="">
                <img src="https://img.yumesakura.com/image/2024/11/07/gpoaz8.png" alt="">
            </div>
            <div class="ADS2">打开京东App，购物更轻松</div>
            <div class="ADS3">立即打开</div>
        </div>
        <div class="Top">
            <div class="Top-Menu">
                <img src="https://img.yumesakura.com/image/2024/11/07/gponiy.png" alt="">
            </div>
            <div class="Top-Search">
                <img src="https://img.yumesakura.com/image/2024/11/07/gpoh4w.png" class="Top-Search-Icon" alt="">
                <div class="Top-Search-Box">
                    <div class="Top-Search-input-Img"></div>
                    <input type="text" class="Top-Search-input" placeholder="键盘鼠标套装">
                </div>
            </div>
            <div class="Top-Login">登录</div>
        </div>
        <div class="Banner"></div>
        <div class="Banner2">
            <div class="HandPhone"></div>
            <div class="Watch"></div>
            <div class="Rangehood"></div>
        </div>
        <div class="Menu">
            <div class="Menu-A">
                <div class="Menu-1">
                    <div class="Menu-icon">
                        <img src="https://img.yumesakura.com/image/2024/11/07/gpofjj.png" alt="">
                    </div>
                    <div class="Menu-text">
                        京东超市
                    </div>
                </div>
                <div class="Menu-2">
                    <div class="Menu-icon">
                        <img src="https://img.yumesakura.com/image/2024/11/07/gpo4a3.png" alt="">
                    </div>
                    <div class="Menu-text">
                        京东超市
                    </div>
                </div>
                <div class="Menu-3">
                    <div class="Menu-icon">
                        <img src="https://img.yumesakura.com/image/2024/11/07/gpo2pk.png" alt="">
                    </div>
                    <div class="Menu-text">
                        京东超市
                    </div>
                </div>
                <div class="Menu-4">
                    <div class="Menu-icon">
                        <img src="https://img.yumesakura.com/image/2024/11/07/gpo4nw.png" alt="">
                    </div>
                    <div class="Menu-text">
                        京东超市
                    </div>
                </div>
                <div class="Menu-5">
                    <div class="Menu-icon">
                        <img src="https://img.yumesakura.com/image/2024/11/07/gpo2jb.png" alt="">
                    </div>
                    <div class="Menu-text">
                        京东超市
                    </div>
                </div>
            </div>
            <div class="Menu-B">
                <div class="Menu-6">
                    <div class="Menu-icon">
                        <img src="https://img.yumesakura.com/image/2024/11/07/gpo1m4.png" alt="">
                    </div>
                    <div class="Menu-text">
                        京东超市
                    </div>
                </div>
                <div class="Menu-7">
                    <div class="Menu-icon">
                        <img src="https://img.yumesakura.com/image/2024/11/07/gpo033.png" alt="">
                    </div>
                    <div class="Menu-text">
                        京东超市
                    </div>
                </div>
                <div class="Menu-8">
                    <div class="Menu-icon">
                        <img src="https://img.yumesakura.com/image/2024/11/07/gpnzgj.png" alt="">
                    </div>
                    <div class="Menu-text">
                        京东超市
                    </div>
                </div>
                <div class="Menu-9">
                    <div class="Menu-icon">
                        <img src="https://img.yumesakura.com/image/2024/11/07/gpxz7a.png" alt="">
                    </div>
                    <div class="Menu-text">
                        京东超市
                    </div>
                </div>
                <div class="Menu-10">
                    <div class="Menu-icon">
                        <img src="https://img.yumesakura.com/image/2024/11/07/gpodjd.png" alt="">
                    </div>
                    <div class="Menu-text">
                        京东超市
                    </div>
                </div>
            </div>
        </div>
        <div class="Sec-kiling">
            <div class="Sec-kiling-titile">
                <div class="Sec-kiling-titile-left">
                    <div>京东秒杀</div>
                    <div>18</div>
                    <img src="https://img.yumesakura.com/image/2024/11/07/gpoae3.png" alt="">
                    <div>更多秒杀</div>
                </div>
                <div class="Sec-kiling-titile-right">
                    <img src="https://img.yumesakura.com/image/2024/11/07/gpodpx.png" alt="">
                </div>
            </div>
            <div class="Sec-kiling-goods">
                <div class="goods-A">
                    <div> <img src="https://img.yumesakura.com/image/2024/11/07/gpxh5s.jpg" alt=""></div>
                    <div>￥25</div>
                </div>
                <div class="goods-B">
                    <div> <img src="https://img.yumesakura.com/image/2024/11/07/gpxmu6.jpg" alt=""></div>
                    <div>￥2568</div>
                </div>
                <div class="goods-C">
                    <div> <img src="https://img.yumesakura.com/image/2024/11/07/gpxila.jpg" alt=""></div>
                    <div>￥28.8</div>
                </div>
                <div class="goods-D">
                    <div> <img src="https://img.yumesakura.com/image/2024/11/07/gpxllp.jpg" alt=""></div>
                    <div>￥19.7</div>
                </div>
                <div class="goods-E">
                    <div> <img src="https://img.yumesakura.com/image/2024/11/07/gpxqjb.jpg" alt=""></div>
                    <div>￥420</div>
                </div>
                <div class="goods-F">
                    <div> <img src="https://img.yumesakura.com/image/2024/11/07/gpxski.jpg" alt=""></div>
                    <div>￥42.9</div>
                </div>
            </div>

            <div class="Goods">
                <div><img src="https://img.yumesakura.com/image/2024/11/07/gpoiq5.webp" alt=""></div>
                <div><img src="https://img.yumesakura.com/image/2024/11/07/gpxboa.webp" alt=""></div>
            </div>

            <div class="Bar">
                <div>首页</div>
                <div>分类</div>
                <div>京喜</div>
                <div>购物车</div>
                <div>未登录</div>
            </div>
        </div>
    </div>
</body>

</html>